<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">表单结构</view>
			<view class="tui-page__desc">展示表单页面的信息结构样式。</view>
		</view>
		<view class="tui-page__bd">
			<form>
				<view class="thorui-cells thorui-arrow tui-title">单选列表项</view>
				<radio-group>
					<tui-list-cell padding="0" v-for="(item, index) in items" :key="index">
						<label class="thorui-checkmark thorui-primary thorui-flex__between thorui-padding">
							<text class="thorui-left__sm">{{ item.name }}</text>
							<radio :value="item.value" :checked="item.checked || false"></radio>
						</label>
					</tui-list-cell>
				</radio-group>
				<view class="thorui-cells tui-title">复选列表项</view>
				<checkbox-group>
					<tui-list-cell padding="0" v-for="(item, index) in items" :key="index">
						<label class="thorui-checkbox thorui-primary thorui-align__center thorui-padding">
							<checkbox color="#fff" :value="item.value" :checked="item.checked || false"></checkbox>
							<text class="thorui-left__sm">{{ item.name }}</text>
						</label>
					</tui-list-cell>
				</checkbox-group>
				<view class="thorui-cells tui-title">表单</view>
				<tui-list-cell :hover="false">
					<view class="thorui-input-item">
						<view class="thorui-input-title">姓名</view>
						<input class="thorui-input" placeholder="请输入姓名" placeholder-class="thorui-phcolor" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="20rpx 30rpx">
					<view class="thorui-input-item">
						<view class="thorui-input-title">手机号</view>
						<input type="number" class="thorui-input" placeholder="请输入手机号" placeholder-class="thorui-phcolor" maxlength="11" />
						<tui-button type="gray-primary" width="200rpx" height="64rpx" :size="30" bold>获取验证码</tui-button>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<picker mode="date" @change="pickerDate">
						<view class="thorui-input-item">
							<view class="thorui-input-title">日期</view>
							<input class="thorui-input" placeholder="请选择日期" placeholder-class="thorui-phcolor" disabled :value="date" />
						</view>
					</picker>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="20rpx 30rpx">
					<view class="thorui-input-item">
						<view class="thorui-input-title">验证码</view>
						<input class="thorui-input" placeholder="请输入验证码" placeholder-class="thorui-phcolor" maxlength="6" />
						<image src="/static/images/index/verifyCode.png" class="thorui-verify__code"></image>
					</view>
				</tui-list-cell>
				<view class="thorui-cells tui-title">开关</view>
				<tui-list-cell :hover="false" padding="20rpx 30rpx">
					<view class="thorui-input-item thorui-flex__between">
						<view class="thorui-input-title">标题文字</view>
						<switch color="#5677fc" checked></switch>
					</view>
				</tui-list-cell>
				<view class="thorui-cells tui-title">文本框（带清除）</view>
				<tui-list-cell :hover="false">
					<view class="thorui-input-item">
						<view class="thorui-input-title">公司名称</view>
						<input class="thorui-input" placeholder="请输入公司名称" placeholder-class="thorui-phcolor" v-model="companyName" />
						<icon type="clear" :size="14" v-if="companyName" @tap="companyName = ''"></icon>
					</view>
				</tui-list-cell>
				<view class="thorui-cells tui-title">文本框（文字居右）</view>
				<tui-list-cell :hover="false">
					<view class="thorui-input-item">
						<view class="thorui-input-title">简介</view>
						<input class="thorui-input thorui-text-right" placeholder="请输入一句话简介" placeholder-class="thorui-phcolor" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="thorui-input-item">
						<view class="thorui-input-title">百分比</view>
						<input class="thorui-input thorui-text-right" placeholder="请输入百分比" placeholder-class="thorui-phcolor" />
						<text>%</text>
					</view>
				</tui-list-cell>
				<view class="thorui-cells tui-title">文本域</view>
				<tui-list-cell :hover="false">
					<view class="thorui-input-item thorui-textarea">
						<textarea class="thorui-input" placeholder-class="thorui-phcolor" placeholder="请输入文本"></textarea>
						<view class="thorui-counter">0/200</view>
					</view>
				</tui-list-cell>
				<view class="thorui-cells tui-title">线条封闭</view>
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="thorui-input-item">
						<view class="thorui-input-title">标题</view>
						<input class="thorui-input" placeholder="请输入文本" placeholder-class="thorui-phcolor" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="thorui-input-item">
						<view class="thorui-input-title">标题</view>
						<input class="thorui-input" placeholder="请输入文本" placeholder-class="thorui-phcolor" />
					</view>
				</tui-list-cell>
				<view class="thorui-cells tui-title">线条不封闭</view>
				<tui-list-cell :hover="false" lineRight>
					<view class="thorui-input-item">
						<view class="thorui-input-title">标题文字</view>
						<input class="thorui-input" placeholder="请输入文本" placeholder-class="thorui-phcolor" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" lineRight>
					<view class="thorui-input-item">
						<view class="thorui-input-title">标题文字</view>
						<input class="thorui-input" placeholder="请输入文本" placeholder-class="thorui-phcolor" />
					</view>
				</tui-list-cell>
				<view class="thorui-cells tui-title">选择</view>
				<tui-list-cell padding="0" :lineLeft="false" :hover="false">
					<view class="thorui-input-item">
						<picker mode="selector" :range="range" @change="pickerAreaCode">
							<view class="thorui-cells thorui-select thorui-select__line">{{ areaCode }}</view>
						</picker>
						<input type="number" class="thorui-input" placeholder="请输入号码" placeholder-class="thorui-phcolor" maxlength="18" />
					</view>
				</tui-list-cell>
				<view class="thorui-cells tui-title">选择</view>
				<tui-list-cell arrow>
					<picker mode="selector" :range="countrys" @change="selectCountry">
						<view class="thorui-input-item">
							<input class="thorui-input" placeholder="请选择地区" placeholder-class="thorui-phcolor" :value="area" disabled/>
						</view>
					</picker>
				</tui-list-cell>
				<tui-list-cell padding="0">
					<picker mode="selector" :range="countrys" @change="pickerCountry">
						<view class="thorui-input-item thorui-cells thorui-select">
							<view class="thorui-input-title">国家地区</view>
							<input class="thorui-input" placeholder="请选择国家/地区" placeholder-class="thorui-phcolor" :value="country" disabled/>
						</view>
					</picker>
				</tui-list-cell>
				<view class="thorui-cells tui-title">上传图片</view>
				<tui-list-cell padding="0" :hover="false">
					<view class="thorui-upload__box">
						<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
					</view>
				</tui-list-cell>
				<view class="thorui-flex__center thorui-clause">
					<label class="thorui-checkbox  thorui-align__center">
						<checkbox color="#5677fc"></checkbox>
						<text class="thorui-left__sm">阅读并同意</text>
					</label>
					<navigator url="/pages/my/protocol/protocol" class="thorui-cell__link">《相关条款》</navigator>
				</view>
				<view class="tui-btn__box thorui-flex__center">
					<tui-button width="400rpx" height="84rpx"  bold formType="submit">提交</tui-button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			items: [
				{
					value: 'CHN',
					name: '中国 CHN',
					checked: true
				},
				{
					value: 'USA',
					name: '美国 USA'
				}
			],
			date: '2020-05-20',
			companyName: '',
			range: ['+86', '+80', '+87', '+84'],
			areaCode: '+86',
			countrys:['中国 CHN','美国 USA','日本 JPN'],
			area:'',
			country:'',
			serverUrl:'https://api.thorui.cn/',
			value:[] //初始化图片
		};
	},
	onLoad() {
		//实际应为请求返回数据
		setTimeout(()=>{
			//实际开发中图片地址应为网络地址
			this.value=['/static/images/my/mine_avatar_3x.jpg']
		},200)
	},
	methods: {
		pickerDate(e) {
			this.date = e.detail.value;
		},
		pickerAreaCode(e) {
			console.log(e);
			this.areaCode = this.range[e.detail.value];
		},
		selectCountry(e){
			this.area = this.countrys[e.detail.value];
		},
		pickerCountry(e){
			this.country = this.countrys[e.detail.value];
		},
		result: function(e) {
			console.log(e)
		},
		remove: function(e) {
			//移除图片
			console.log(e)
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.tui-title {
	width: 100%;
	font-size: 28rpx;
	color: #888;
	padding: 40rpx 30rpx 20rpx;
	box-sizing: border-box;
}
.tui-btn__box{
	padding: 60rpx 0;
}

</style>
